<template>
  <div class="c_toTopBox" v-show="boxShow">
    <div class="c_toTop_btn" @click="toTop()" data-sudaclick="caitong_newsdetail_top">
      <a href="javascript:;"></a>
    </div>
    <div class="c_toHome_btn" data-sudaclick="caitong_newsdetail_homepage">
      <a href="http://caitong.sina.cn/" target="_self"></a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      boxShow: false,
    }
  },
  methods: {
    toTop() {
      window.scrollTo(0, 0);
    },
    ifshow() {
      if (window.scrollY > 450) {
        this.boxShow = true;
      } else {
        this.boxShow = false;
      }
    }

  },
  created() {
    var self = this;
    window.tt_timer = null;
    $(window).scroll(function () {
      clearInterval(window.tt_timer);
      window.tt_timer = setTimeout(self.ifshow, 200);
    })
  }
}

</script>
<style lang="stylus" rel="stylesheet/stylus">
.c_toTopBox{
  position: fixed;
  bottom: 120px;
  right: 12px;
  width: 42px;
  z-index: 999;
}
.c_toTop_btn a,.c_toHome_btn a{
    width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 50%;
  background-size: 42px auto;
  display: block;
  background-image url("./i/go_top_icon.png");
}
.c_toHome_btn a{
  background-image url("./i/go_home_icon.png");
  margin-bottom:0;
}

</style>